<template>
	<view class="dynamic" :style="{backgroundImage:'url('+imageURL+')'}">
		<uni-nav-bar  background-color="transparent" :fixed="true" :border="false"  status-bar left-icon="left" @clickLeft="back"  />
		
		<u-avatar
		size="50"
		:text="text"
		shape="square" 
		bg-color="#0080FF"
		font-size='15'>
		</u-avatar>
		
		<view class="info">
			<view class="edit-data">
				<u-button class="colleagues-dynamic" style="margin-right: 10%;" type="default" icon="moments" iconColor="#55ff7d"  text="同事动态" @click="navTo('/pages/user/dynamic/colleagues')"></u-button>
				<u-button type="default" text="编辑资料" @click="navTo('/pages/user/dynamic/editData')"></u-button>
			</view>
			<view class="info-name">
				{{user.name}}
			</view>
			<view class="info-concern">
				<text class="concer-number">{{user.mineConcern}}</text>
				<button class="mine-concern">我关注的</button>
				<text>{{user.concernMe}}</text>
				<button class="me-concerned">关注我的</button>
				<button class="my-circle-dynamic">我的圈子动态&nbsp;></button>
			</view>
		</view>
		
		<view class="my-dynamic" v-if="dynamic.length==0">
			<u-image width="200" height="200" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
			<text>最近很多人来访过</text>
			<view class="dynamic-update">
				他们期待你的更新
			</view>
			<button class="public-dynamic">发布第一条动态</button>
		</view>
	</view>
</template>
	
<script>
	export default{

		data(){
			return{
				imageURL:'/static/user/dynamic/dynamicBackgroundImage.png',
				text:'陳陳',
				user:{
					userId:1,
					name:'陈陳陳',
					mineConcern:0,
					concernMe:0,
				},
				dynamic:[],
			}
		},
		onLoad(){
			
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
	
</script>

<style lang="less" scoped>
	.dynamic{
		width: 800rpx;
		height: 700rpx;
		/* #ifdef MP-WEIXIN */
		u-avatar{
			position: absolute;
			top: 33%;
			left: 8%;
		}
		/* #endif */
		.u-avatar{
			position: absolute;
			top:38%;
			left: 7%;
		}
		.info{
			margin-top: 50%;
			height: 40%;
			width: 100%;
			background-color: white;
			.edit-data{
				float: right;
				width: 100%;
				/* #ifdef MP */
				::v-deep u-button{
					font-weight: 600;
					padding: 0 0 0 0;
					float: right;
					margin-top: 2%;
					width: 20%;
					margin-right: 3%;
					border-radius: 10rpx;
					border: 1rpx solid #f2f2f2;
				}
				/* #endif */
				
				/* #ifdef H5 */
				::v-deep .u-button{
					font-weight: 600;
					padding: 0 0 0 0;
					float: right;
					margin-top: 2%;
					width: 20%;
					margin-right: 3%;
					border-radius: 10rpx;
					border: 1rpx solid #f2f2f2;
				}
				/* #endif */
				
				
				::v-deep .u-button .colleagues-dynamic{
					margin-right: 10%;
				}
			}
			.info-name{
				width: 100%;
				margin-left: 5%;
				font-size: 40rpx;
				font-weight: 600;
			}
			.info-concern{
				width: 100%;
				text{
					margin-left: 2%;
					float: left;
					font-size: 35rpx;
					font-weight: 600;
				}
				.concer-number{
					margin-left: 5%;
				}
				.mine-concern::after{
					border-radius: 0rpx;
					border: none;
					border-right: 1rpx solid #303030;
				}
				.mine-concern{
					margin-top: 1.5%;
					line-height: 30rpx;
					float: left;
					width: 13%;
					font-size: 22rpx;
					background-color: white;
				}
				.me-concerned{
					margin-top: 1.5%;
					line-height: 30rpx;
					float: left;
					width: 13%;
					font-size: 22rpx;
					background-color: white;
				}
				.me-concerned::after{
					border: none;
				}
				.my-circle-dynamic{
					margin-right: 10%;
					float: right;
					margin-top: 0.5%;
					line-height: 40rpx;
					width: 25%;
					font-size: 23rpx;
					background-color: white;
				}
				.my-circle-dynamic::after{
					border: none;
				}
				button{
					padding-left: 0rpx;
					padding-right: 0rpx;
				}
				
			}
		}
		
		.my-dynamic{
			width: 100%;
			::v-deep .u-image{
				margin-left: 25%;
				margin-bottom: 5%;
			}
			text{
				letter-spacing: 2px;
				margin-left:29%;
				font-size: 35rpx;
				font-weight: 600;
			}
			.dynamic-update{
				margin-top: 2%;
				margin-left: 31%;
				letter-spacing: 1px;
				color: #818181; 
			}
			.public-dynamic{
				margin-top: 2%;
				margin-left: 30%;
				width:30% ;
				line-height: 35px;
				font-size: 16px;
				font-weight: 520;
				background-color: #0180FD;
				color: white;
				
			}	
			button{
				padding: 0;
			}
		}
	}
</style>